﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>待办</title>
    <!-- 引入 mui -->
    <link href="../CCMobile/js/mui/css/mui.css" rel="stylesheet" type="text/css" />
    <!-- 自定义样式 -->
    <link href="../CCMobile/css/index2.css" rel="stylesheet" type="text/css" />
    <script src="../CCMobile/js/jquery.js" type="text/javascript"></script>
    <script src="../CCMobile/js/pullToRefresh.js" type="text/javascript" charset="gb2312"></script>
    <script src="../CCMobile/js/comment/action.js" type="text/javascript"></script>
    <script src="../CCMobile/Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../CCMobile/Scripts/config.js" type="text/javascript"></script>
    <script src="../CCMobile/Comm/Gener.js" type="text/javascript"></script>
    <script src="../CCMobile/js/mui/js/mui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        mui.init();
        mui.ready(
            //初始化数据.
            function InitPage() {
                var webUser = new WebUser();
                imag = webUser.Name.substr(webUser.Name.length - 2);

                var _drafhtml = "";
                var _runhtml = "";
                var _comhtml = "";
                //获取我发起的流程的草稿、在途、已完成数据
                var handler = new HttpHandler("BP.WF.HttpHandler.CCMobilePortal_SaaS");
                var data = handler.DoMethodReturnString("GetMyStartGenerWorks");
                var pushData = eval('(' + data + ')');
                //草稿数据
                var Draflist = pushData.Draflist;
                //处理中数据
                var Running = pushData.Running;
                //已完成数据
                var Complete = pushData.Complete;

                if (Running.length <= 0) {
                    _runhtml += "<div class='au-prompt au-mg-top'>";
                    _runhtml += "<img src='../CCMobile/image/prompt1.png' style='width: 8rem;'>";
                    _runhtml += "<span class='au-text-99 au-font-12'>暂无数据</span>";
                    _runhtml += "</div>";
                    $("#item_running").html(_runhtml);
                }
                else {
                    //填充在途信息
                    $.each(Running, function (i, t) {
                        _runhtml += "<div class='box' id='" + t.WorkID + "_" + t.FK_Flow + "_Running_" + t.FK_Node + "_" + t.FID + "'><div class='box-item'><div class='flex flex-between'>";
                        _runhtml += "<div class='mark type-bg'>合同管理流程</div>";
                        _runhtml += "<img src='../CCMobile/image/more.png' class='au-xs-ioc item'></div>";
                        _runhtml += "<div class='flex'><span class='dot'></span>";
                        _runhtml += "<div class='flex-1 au-m-l-8 au-text-33 au-font-12 au-font-bold overline-1'>";
                        _runhtml += t.Title + "</div><div class='list-but'>";

                        _runhtml += "</div></div>";
                        _runhtml += "<div class='au-font-11 au-text-66 date-m'>";
                        _runhtml += "<div>发起人：<span>" + t.StarterName + "</span></div>";
                        _runhtml += "<div>发起时间：" + t.RDT + "</div></div></div>";

                        _runhtml += "</div></div>";
                    });
                    $("#item_running").html(_runhtml);
                }

                if (Complete.length <= 0) {
                    _comhtml += "<div class='au-prompt au-mg-top'>";
                    _comhtml += "<img src='../CCMobile/image/prompt1.png' style='width: 8rem;'>";
                    _comhtml += "<span class='au-text-99 au-font-12'>暂无数据</span>";
                    _comhtml += "</div>";
                    $("#item_complete").html(_comhtml);
                }
                else {
                    //填充已完成信息
                    $.each(Complete, function (i, t) {
                        _comhtml += "<div class='box' id='" + t.WorkID + "_" + t.FK_Flow + "_Complete_" + t.FK_Node + "_" + t.FID + "'><div class='box-item'><div class='flex flex-between'>";
                        _comhtml += "<div class='mark type-bg'>合同管理流程</div>";
                        _comhtml += "<img src='../CCMobile/image/more.png' class='au-xs-ioc item'></div>";
                        _comhtml += "<div class='flex'><span class='dot'></span>";
                        _comhtml += "<div class='flex-1 au-m-l-8 au-text-33 au-font-12 au-font-bold overline-1'>";
                        _comhtml += t.Title + "</div><div class='list-but'>";


                        _comhtml += "</div></div>";
                        _comhtml += "<div class='au-font-11 au-text-66 date-m'>";
                        _comhtml += "<div>发起人：<span>" + t.StarterName + "</span></div>";
                        _comhtml += "<div>发起时间：" + t.RDT + "</div></div></div>";

                        _comhtml += "</div></div>";
                    });
                    $("#item_complete").html(_comhtml);
                }

                if (Draflist.length <= 0) {
                    _drafhtml += "<div class='au-prompt au-mg-top'>";
                    _drafhtml += "<img src='../CCMobile/image/prompt1.png' style='width: 8rem;'>";
                    _drafhtml += "<span class='au-text-99 au-font-12'>暂无数据</span>";
                    _drafhtml += "</div>";
                    $("#item_draflist").html(_drafhtml);
                }
                else {
                    //填充草稿信息
                    $.each(Draflist, function (i, t) {
                        _drafhtml += "<div class='box' id='" + t.WorkID + "_" + t.FK_Flow + "_Todolist_" + t.FK_Node + "_" + t.FID + "'><div class='box-item'><div class='flex flex-between'>";
                        _drafhtml += "<div class='mark type-bg'>" + t.FlowName + "</div>";
                        _drafhtml += "<img src='../CCMobile/image/more.png' class='au-xs-ioc item'></div>";
                        _drafhtml += "<div class='flex'><span class='dot'></span>";
                        _drafhtml += "<div class='flex-1 au-m-l-8 au-text-33 au-font-12 au-font-bold overline-1'>";
                        _drafhtml += t.Title + "</div><div class='list-but'>";
                        _drafhtml += "</div></div>";
                        _drafhtml += "<div class='au-font-11 au-text-66 date-m'>";
                        _drafhtml += "<div>发起人：<span>" + t.StarterName + "</span></div>";
                        _drafhtml += "<div>发起时间：" + t.RDT + "</div></div></div>";
                        _drafhtml += "</div></div>";
                    });
                    $("#item_draflist").html(_todohtml);
                }


                var doType = GetQueryString("DoType");
                //如果是在途
                if (doType == "Running") {
                    //设置选中
                    $("#running").addClass("mui-active");
                    //显示在途相关item
                    $("#item_running").addClass("mui-active");
                    //隐藏其他内容
                    $("#draflist").removeClass("mui-active");
                    $("#item_draflist").removeClass("mui-active")
                    $("#complete").removeClass("mui-active");
                    $("#item_complete").removeClass("mui-active");
                }//如果是已完成
                else if (doType == "Complete") {
                    //隐藏待办、在途
                    $("#running").removeClass("mui-active");
                    $("#item_running").removeClass("mui-active");
                    $("#draflist").removeClass("mui-active");
                    $("#item_draflist").removeClass("mui-active");
                    //显示已完成
                    $("#complete").addClass("mui-active");
                    //显示已完成内容
                    $("#item_complete").addClass("mui-active");
                }
                else {//如果是待办
                    $("#running").removeClass("mui-active");
                    $("#item_running").removeClass("mui-active");
                    //显示草稿
                    $("#draflist").addClass("mui-active");
                    //显示草稿内容
                    $("#item_draflist").addClass("mui-active");
                    $("#complete").removeClass("mui-active");
                    $("#item_complete").removeClass("mui-active");
                }

                //绑定点击事件
                var boxs = $(".box");
                $.each(boxs, function (i, box) {
                    var divId = $(box).attr("id");
                    //将ID值进行分解
                    var vals = divId.split('_');
                    //WorkID
                    var oid = vals[0];
                    //流程编号
                    var fk_flow = vals[1];
                    //流程处理状态
                    var type = vals[2];
                    //节点编号
                    var fk_node = vals[3];
                    //fid
                    var fid = vals[4];
                    if (type == "Draf") {
                        $("#" + divId).on("tap", function () {
                            var url = "../CCMobile/MyFlow.htm?FK_Flow=" + fk_flow + "&WorkID=" + oid + "&FID=" + fid + "&MyFlowFrom=Draf" + "&m=" + Math.random();
                            window.location.href = filterXSS(url);
                        });
                    }
                    else {
                        $("#" + divId).on("tap", function () {
                            var url = "../CCMobile/MyView.htm?FK_Flow=" + fk_flow + "&WorkID=" + oid + "&FK_Node=" + fk_node + "&FID=" + fid + "&MyViewFrom=" + type + "&m=" + Math.random();
                            window.location.href = filterXSS(url);
                        });
                    }
                });
            }
        );
        //退回
        function Back1() {
            window.location.href = '../CCMobilePortal/Home.htm?s=' + Math.random();
            return;
        }
    </script>
</head>
<body>
    <div class="pages">
        <!--底部-->
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#tabbar" id="home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">发起</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-todolist" id="todolist">
                <span class="mui-icon mui-icon-email"><span class="mui-badge" id="EmpWorks_Count">0</span></span>
                <span class="mui-tab-label">待办</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-search" id="search">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">查询</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-set" id="setting">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>
        <section class="mui-content">

            <div class="au-bg-white">
                <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                    <a class="mui-control-item tab-item" id="running" href="#item_running" data-index="1">
                        处理中
                    </a>
                    <a class="mui-control-item tab-item" id="complete" href="#item_complete" data-index="2">
                        已完成
                    </a>
                    <a class="mui-control-item tab-item" id="draflist" href="#item_draflist" data-index="0">
                        草稿
                    </a>
                </div>
            </div>
            <div class="tab-box">
                <div id="item_draflist" class="mui-control-content"></div>
                <div id="item_running" class="mui-control-content"></div>
                <div id="item_complete" class="mui-control-content"></div>
            </div>


        </section>
    </div>
    <script>
        mui.init({
            swipeBack: true, //启用右滑关闭功能
            beforeback: function () {//监听物理返回按键的方法
                Back1();
                return false;
            }
        });

        // 选项卡
        (function ($) {
            document.querySelectorAll(".mui-control-item").forEach(function (item) {
                item.addEventListener('tap', function (e) {
                    //此处写需要实现的功能 可根据锚点href判断当前类型,如果样式相同可删除锚点共用一个div，可根据data-index自定义属性判断
                    var targetTab = this.getAttribute('data-index');
                    console.log(JSON.stringify(targetTab))
                })
            })
        })(mui);
    </script>

</body>
</html>
